<style rel="stylesheet/scss" lang="scss" scoped>
  .mid {
    line-height: 140px;
}
</style>
<template>
  <div class="app-container calendar-list-container">
    <!-- 认证过期预警 -->
    <div class="pds-tip">
      <div class="title">认证预警</div>
    </div>
    <el-table :data="list" border fit highlight-current-row style="width: 100%;margin-bottom:20px;">
      <el-table-column width="50" align="center" label="序号">
        <template slot-scope="scope">
          {{(pageData.params.page-1)*pageData.params.limit+(scope.$index+1)}}
        </template>
      </el-table-column>
      <el-table-column prop="certNo" align="center" label="证书编号">
      </el-table-column>
      <el-table-column prop="certEffectiveDate" align="center" label="过期日期">
      </el-table-column>
      <el-table-column prop="warningDay" align="center" label="预警阈值">
      </el-table-column>
      <el-table-column prop="createTime" align="center" label="创建时间">
      </el-table-column>
      <el-table-column label="操作" align="center" width="220px">
        <template slot-scope="scope">
          <el-button type="primary" size="small"  @click="edit1(scope.$index, scope.row)">更新
          </el-button>
          <!-- <el-button size="small" type="primary" v-if="scope.row.status===2" @click="$router.push({path:'',query:{modelPbsId:scope.row.id}})">更新</el-button> -->
          <el-button size="small" type="danger" @click="handleCance1(scope.row)">作废
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="更新证书编号" :visible.sync="dialogFormVisible1">
      <el-form :model="tableDel">
        <el-form-item label="证书编号" :label-width="formLabelWidth">
          <el-input autocomplete="off" v-model="tableDel.certNo"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible1 = false">取 消</el-button>
        <el-button type="primary" @click="submitEdit1()">确 定</el-button>
      </div>
    </el-dialog>
    <pagination :pageData="pageData.params" @pageChange="changePage" @changeSize="changeSize"></pagination>
<!-- 报告过期预警 -->
 <div class="pds-tip">
      <div class="title">报告预警</div>
    </div>
    <el-table :data="reportlist" border fit highlight-current-row style="width: 100%;margin-bottom:20px;">
      <el-table-column width="50" align="center" label="序号">
        <template slot-scope="scope">
          {{(pageData.params.page-1)*pageData.params.limit+(scope.$index+1)}}
        </template>
      </el-table-column>
      <el-table-column prop="certNo" align="center" label="证书编号">
      </el-table-column>
      <el-table-column prop="certReportNo" align="center" label="报告编号">
      </el-table-column>
      <el-table-column prop="certReportEffectiveDate" align="center" label="过期日期">
      </el-table-column>
      <el-table-column prop="warningDay" align="center" label="预警阈值">
      </el-table-column>
      <el-table-column label="操作" align="center" width="220px">
        <template slot-scope="scope">
          <el-button type="primary" size="small"  @click="edit2(scope.$index, scope.row)">更新
          </el-button>
          <!-- <el-button size="small" type="primary" v-if="scope.row.status===2" @click="$router.push({path:'',query:{modelPbsId:scope.row.id}})">更新</el-button> -->
          <el-button size="small" type="danger" @click="handleCance2(scope.row)">作废
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="报告预警编号" :visible.sync="dialogFormVisible2">
      <el-form :model="tableDel2">
        <el-row>
          <el-col :span="12"><div class="grid-content bg-purple-dark">
             <el-form-item label="标准名称" :label-width="formLabelWidth">
          <el-input autocomplete="off" v-model="tableDel2.certReportNo"></el-input>
        </el-form-item>
            </div></el-col>
          <el-col :span="12"><div class="grid-content bg-purple-dark">
             <el-form-item label="过期日期" :label-width="formLabelWidth">
          <el-input autocomplete="off" v-model="tableDel2.certReportEffectiveDate"></el-input>
        </el-form-item>
            </div></el-col> 
        </el-row>
        <el-row>
          <el-col :span="12"><div class="grid-content bg-purple-dark">
             <el-form-item label="使用标准" :label-width="formLabelWidth">
          <el-select v-model="value" filterable placeholder="请选择">
            <el-option
              v-for="item in tabsele"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
            </div></el-col>
          <el-col :span="12"><div class="grid-content bg-purple-dark">
             <el-form-item label="预警阈值" :label-width="formLabelWidth">
          <el-input autocomplete="off" v-model="tableDel2.warningDay"></el-input>
        </el-form-item>
            </div></el-col> 
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="相关参数" :label-width="formLabelWidth">
          <el-input autocomplete="off" v-model="tabxiangguan.xianguan"></el-input>
        </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="备注" :label-width="formLabelWidth">
          <el-input type="textarea" v-model="tabxiangguan.beizhu"></el-input>
        </el-form-item>
          </el-col>
        </el-row>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible2 = false">取 消</el-button>
        <el-button type="primary" @click="submitEdit2()">确 定</el-button>
      </div>
    </el-dialog>
    <pagination :pageData="pageData.params" @pageChange="changePage" @changeSize="changeSize"></pagination>
    <!-- 标准过期预警 -->
     <div class="pds-tip">
      <div class="title">标准预警</div>
    </div>
    <el-table :data="standardlist" border fit highlight-current-row style="width: 100%;margin-bottom:20px;">
      <el-table-column width="50" align="center" label="序号">
        <template slot-scope="scope">
          {{(pageData.params.page-1)*pageData.params.limit+(scope.$index+1)}}
        </template>
      </el-table-column>
      <el-table-column prop="name" align="center" label="标准名称">
      </el-table-column>
      <el-table-column prop="effectiveDate" align="center" label="过期日期">
      </el-table-column>
      <el-table-column prop="warningDay" align="center" label="预警阈值">
      </el-table-column>
      <el-table-column label="操作" align="center" width="220px">
        <template slot-scope="scope">
          <el-button type="primary" size="small"  @click="edit3(scope.$index, scope.row)">更新
          </el-button>
          <!-- <el-button size="small" type="primary" v-if="scope.row.status===2" @click="$router.push({path:'',query:{modelPbsId:scope.row.id}})">更新</el-button> -->
          <el-button size="small" type="danger" @click="handleCance3(scope.row)">作废
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="标准预警编号" :visible.sync="dialogFormVisible3">
      <el-form :model="tableDel3">
        <el-form-item label="标准名称" :label-width="formLabelWidth">
          <el-input autocomplete="off" v-model="tableDel3.name"></el-input>
        </el-form-item>
        <el-form-item label="预警阈值" :label-width="formLabelWidth">
          <el-input autocomplete="off" v-model="tableDel3.warningDay"></el-input>
        </el-form-item>
        <el-form-item label="标准有效期" :label-width="formLabelWidth">
          <el-input autocomplete="off" v-model="tableDel3.effectiveDate "></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible3 = false">取 消</el-button>
        <el-button type="primary" @click="submitEdit3()">确 定</el-button>
      </div>
    </el-dialog>
    <pagination :pageData="pageData.params" @pageChange="changePage" @changeSize="changeSize"></pagination>
  </div>
</template>
<script>
  import {
    mapGetters
  } from 'vuex';
  import * as api from '@/api/cert/warning/index'
  export default {
    name: 'user',
    components: {
      // 'depart-selector': () =>
      //   import ('./components/departSelector')
    },
    data() {
      return {
        pageData: {
          params: {
            page: 1,
            limit: 10,
            total: 100
          }
        },
        list: [],
        reportlist: [],
        standardlist: [],
        dialogFormVisible1: false,
        dialogFormVisible2: false,
        dialogFormVisible3: false,
        formLabelWidth: '100px',
        tableDel: {},
        tableDel2: {},
        tableDel3: {},
        tabreport: {},
        tabsele: [],
        value: '',
        tabxiangguan: {}
      };
    },
    created() {
      this.getcertList()
      this.getreportList()
      this.getstandardList()
    },
    computed: {
      ...mapGetters([
        'elements',
        'language'
      ])
    },
    methods: {
      showMenu() {
        console.log('showMenu');
      },
      changePage(pageData) {
        this.pageData.params.page = pageData.page;
        this.getcertList();
      },
      changeSize(pageSize) {
        this.pageData.params.limit = pageSize;
        this.pageData.params.page = 1;
        this.getcertList();
      },
      // 认证过期预警作废
      handleCance1(row) {
        console.log(row)
        this.$confirm('此操作将作废该证书, 是否继续?', '提示', {
          type: 'warning'
        }).then(() => {
          api.cancePlan(row.certId).then(response => {
            console.log(response)
            if (response.code === 200) {
              this.$message({
                type: 'success',
                message: '操作成功!'
              });
              this.getcertList()
            }
          })
        })
      },
      // 认证过期预警列表
      getcertList() {
        const params = Object.assign({}, this.pageData.params);
        delete params.total;
        api.cert(params).then(response => {
          if (response.code === 200) {
            this.list = response.data;
            console.log('证书', this.list)
            this.pageData.params.total = response.data.total;
          }
        });
      },
      // 认证过期预警更新
      edit1(index, item) {
        console.log(item)
        if (item) {
          this.tableDel = JSON.parse(JSON.stringify(item));
        }
        this.dialogFormVisible1 = true;
      },
      // 认证过期预警提交
      submitEdit1() {
        console.log(this.tableDel)
        this.tableDel = {
          certNo: this.tableDel.certNo,
          certId: this.tableDel.certId
        }
        api.update(this.tableDel).then(res => {
          if (res.code === 200) {
            this.$message({
              message: '更新成功!',
              type: 'success'
            });
            this.dialogFormVisible1 = false;
            this.getcertList()
          }
        })
        this.dialogFormVisible1 = false;
      },
      //  认证报告预警废弃
      handleCance2(row) {
        console.log(row)
        this.$confirm('此操作将作废该证书, 是否继续?', '提示', {
          type: 'warning'
        }).then(() => {
          api.reportPlan(row.certReportId).then(response => {
            console.log(response)
            if (response.code === 200) {
              this.$message({
                type: 'success',
                message: '操作成功!'
              });
              this.getcertList()
            }
          })
        })
      },
      // 认证报告预警列表
      getreportList() {
        const params = Object.assign({}, this.pageData.params);
        delete params.total;
        api.report(params).then(response => {
          if (response.code === 200) {
            console.log(response)
            this.reportlist = response.data;
            console.log('报告预警', this.reportlist)
            this.pageData.params.total = response.data.total;
          }
        });
      },
      edit2(index, item) {
        console.log(item)
        if (item) {
          this.tableDel2 = JSON.parse(JSON.stringify(item));
        }
        api.CertStandards().then(res => {
          console.log('+=+=+=>', res)
          this.tabsele = res.data
        })
        this.tabxiangguan = {
          xianguan: '',
          beizhu: ''
        }
        this.dialogFormVisible2 = true;
      },
      submitEdit2() {
        console.log(this.tableDel2)
        this.tabsele.forEach(item => {
          this.biaozhun = item.id
          console.log(this.biaozhun)
        })
        this.tableDel2 = {
          certId: this.tableDel2.id,
          certReportNo: this.tableDel2.certReportNo,
          certStandardId: this.biaozhun,
          certReportEffectiveDate: this.tableDel2.certReportEffectiveDate,
          params: this.tabxiangguan.xianguan,
          remark: this.tabxiangguan.beizhu,
          warningDay: this.tableDel2.warningDay,
          status: 0,
          oldId: this.tableDel2.certReportId
        }
        api.updatereport(this.tableDel2).then(res => {
          if (res.code === 200) {
            this.$message({
              message: '更新成功!',
              type: 'success'
            });
            this.dialogFormVisible2 = false;
            this.getreportList()
          }
        })
      },
      handleCance3(row) {
        console.log(row)
        this.$confirm('此操作将作废该证书, 是否继续?', '提示', {
          type: 'warning'
        }).then(() => {
          api.standardPlan(row.certStandardId).then(response => {
            console.log(response)
            if (response.code === 200) {
              this.$message({
                type: 'success',
                message: '操作成功!'
              });
              this.getcertList()
            }
          })
        })
      },
      // 标准预警
      getstandardList() {
        const params = Object.assign({}, this.pageData.params);
        delete params.total;
        api.standard(params).then(response => {
          if (response.code === 200) {
            console.log(response)
            this.standardlist = response.data;
            console.log('标准', this.standardlist)
            this.pageData.params.total = response.data.total;
          }
        });
      },
      edit3(index, item) {
        console.log(item)
        if (item) {
          this.tableDel3 = JSON.parse(JSON.stringify(item));
        }
        this.dialogFormVisible3 = true;
      },
      submitEdit3() {
        console.log(this.tableDel3)
        this.tableDel3 = {
          name: this.tableDel3.name,
          warningDay: this.tableDel3.warningDay,
          effectiveDate: this.tableDel3.effectiveDate,
          status: 0,
          oldId: this.tableDel3.certStandardId
        }
        api.updatestandard(this.tableDel3).then(res => {
          if (res.code === 200) {
            this.$message({
              message: '更新成功!',
              type: 'success'
            });
            this.dialogFormVisible3 = false;
            this.getstandardList()
          }
        })
      }
    }
  }

</script>
